<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax知识学习</title>
<script type="text/javascript">
	//获取简单数据
	function loadName() {
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				alert(xmlHttp.responseText);
				document.getElementById("name").value=xmlHttp.responseText;
				//alert(document.getElementsByName("name").toString());
				//document.getElementsByName("name").value="OK";//用name找不到DOM节点，name会有重名,返回的是object NodeList
			}
		}
		//方式一：因为参数都跟在请求后面，所以post效果一样，参数在浏览器地址栏能被看到
		//xmlHttp.open("get", "getAjaxName?name=haha&age=11&sex=female", true);//使用get方式，异步请求getAjaxName，并携带参数
		//xmlHttp.open("post", "getAjaxName?name=haha&age=11&sex=female", true);//使用post方式，异步请求getAjaxName，并携带参数效果和get一样了
		//xmlHttp.send();
		//方式二：使用post，模拟form提交
		xmlHttp.open("post", "getAjaxName", true);//
		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlHttp.send("name=haha&age=25&sex=male");
	}
	//获取简单JSON信息
	function loadInfo() {
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				alert(xmlHttp.responseText);
				var dataObj = eval("("+xmlHttp.responseText+")");//将JSON字符串转换成JS对象
				document.getElementById("name2").value=dataObj.name;
				document.getElementById("age2").value=dataObj.age;
			}
		}
		//
		xmlHttp.open("get", "getAjaxInfo?action=sampleJsonObject", true);//使用get方式，异步请求getAjaxInfo
		xmlHttp.send();
	}
	//获取数组JSON信息，表格显示
	function loadInfo2() {
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				alert(xmlHttp.responseText);
				var dataObj = eval("("+xmlHttp.responseText+")");//将JSON字符串转换成JS对象
				var st = document.getElementById("studentTable");//获取table的node
				var newTr;//行
				var newTd1;//第一列
				var newTd2;//第二列
				for (var i = 0; i < dataObj.students.length; i++) {
					var student = dataObj.students[i];//取出第一个学生数据，即第一行
					newTr = st.insertRow();//在table中插入一行，保存引用
					newTd1 = newTr.insertCell();//在新插入的行中插入一个列
					newTd2 = newTr.insertCell();//在新插入的行中插入一个列
					newTd1.innerHTML = student.name;
					newTd2.innerHTML = student.age;
					newTr.insertCell().innerHTML = "OK";
				}				
			}
		}
		//
		xmlHttp.open("get", "getAjaxInfo?action=complexJsonObject", true);//使用get方式，异步请求getAjaxInfo
		xmlHttp.send();
	}
	
	//获取嵌套JSON信息，表格显示
	function loadInfo3() {
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
		//设置回调函数，有点像java的匿名内部类用法
		xmlHttp.onreadystatechange=function(){
			//alert("readState状态:"+xmlHttp.readyState+",status状态:"+xmlHttp.status);
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				alert(xmlHttp.responseText);
				var dataObj = eval("("+xmlHttp.responseText+")");//将JSON字符串转换成JS对象
				var st = document.getElementById("studentTable2");//获取table的node
				var newTr;//行
				var newTd1;//第一列
				var newTd2;//第二列
				var newTd3;//第三列
				var newTd4;//第四列
				var newTd5;//第五列
				for (var i = 0; i < dataObj.students.length; i++) {
					var student = dataObj.students[i];//取出第一个学生数据，即第一行
					newTr = st.insertRow();//在table中插入一行，保存引用
					newTd1 = newTr.insertCell();//在新插入的行中插入一个列
					newTd2 = newTr.insertCell();//在新插入的行中插入一个列
					newTd3 = newTr.insertCell();//在新插入的行中插入一个列
					newTd4 = newTr.insertCell();//在新插入的行中插入一个列
					newTd5 = newTr.insertCell();//在新插入的行中插入一个列
					newTd1.innerHTML = student.name;
					newTd2.innerHTML = student.age;
					newTd3.innerHTML = student.score.语文;
					newTd4.innerHTML = student.score.数学;
					newTd5.innerHTML = student.score.英语;
				}				
			}
		}
		//
		xmlHttp.open("get", "getAjaxInfo?action=nestedJsonObject", true);//使用get方式，异步请求getAjaxInfo
		xmlHttp.send();
	}
	function resetValue() {
		document.getElementById("name").value="";
		document.getElementById("name2").value="";
		document.getElementById("age2").value="";
		//document.getElementById("name2").value="";
	}
</script>
</head>
<body>
<div style="text-align: center;">
	<div>
		<input type="button" value="Ajax获取数据" onclick="loadName()">&nbsp;&nbsp;&nbsp;
		姓名:<input type="text" id="name" name="name">&nbsp;&nbsp;&nbsp;
		<input type="button" value="清空信息" onclick="resetValue()">
	</div>
</div>
<div style="text-align: center;margin-top: 50px">
	<div>
		<input type="button" value="Ajax获取信息" onclick="loadInfo()">&nbsp;&nbsp;&nbsp;
		姓名:<input type="text" id="name2" name="name">
		年龄:<input type="text" id="age2" name="age">
	</div>
	<div style="margin-top: 20px">
		<input type="button" value="Ajax获取信息2" onclick="loadInfo2()"><br><br>
		<table id="studentTable" align="center" border="1px" bordercolor="blue" cellpadding="1px">
			<tr>
				<th width="100">姓名</th>
				<th width="100">年龄</th>
			</tr>
		</table>
	</div>
		<div style="margin-top: 20px">
		<input type="button" value="Ajax获取信息2" onclick="loadInfo3()"><br><br>
		<table id="studentTable2" align="center" border="1px" bordercolor="blue" cellpadding="1px">
			<tr>
				<th width="100" rowspan="2">姓名</th>
				<th width="100" rowspan="2">年龄</th>
				<th colspan="3">成绩</th>
			</tr>
			<tr>
				<th width="100">语文</th>
				<th width="100">数学</th>
				<th width="100">英语</th>
			</tr>
		</table>
	</div>
</div>
</body>
</html>